<template>
  <!-- <p>{{ state.name }} --- {{ state.age }}</p> -->
  <p>{{ name }} --- {{ age }}</p>
</template>

<script>
import { ref, onMounted, reactive, toRef, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      age: 20,
      name: "wc",
    });
    // 把reactive中的每人上属性都变成ref
    const stateAsRefs = toRefs(state);

    return {
      ...stateAsRefs,
    };
  },
};
</script>